import { UserInfoRep } from "@/api/user";
import { Mask } from "antd-mobile";
import clsx from "clsx";
import { useTranslations } from "next-intl";
import React from "react";
import styles from "./index.module.scss";

interface Props {
    visible: boolean;
    useInfo: UserInfoRep;
    onClose?: (needRefresh?: boolean) => void;
}

interface ImgItem {
    key: number;
    img: string;
}

const ChangeNickName: React.FC<Props> = ({ visible = false, useInfo, onClose }) => {
    const t = useTranslations("ProfilePage");

    const [innerVisible, setInnerVisible] = React.useState<boolean>(true);
    React.useEffect(() => {
        setInnerVisible(visible);
    }, [visible]);

    const doChangeAvatar = () => {};
    const close = () => {};
    return (
        <Mask visible={visible} onMaskClick={close}>
            <div className={styles.Dialog}>
                <div
                    className={clsx(styles.DialogContainer, {
                        [styles.visible]: innerVisible,
                    })}
                >
                    <div className={styles.content}>
                        <div className={styles.title}>Selecione um Avatar</div>

                        <div
                            className="mt-[.1rem] rounded-[.2rem] bg-[#11de68] py-[.08rem] text-center text-[.18rem] font-bold text-[#12171a]"
                            onClick={doChangeAvatar}
                        >
                            Claro
                        </div>
                    </div>
                    <div className={clsx(styles.close)} onClick={close}>
                        <i className={clsx("iconfont icon-guanbi relative z-10 text-[.14rem]")}></i>
                    </div>
                </div>
            </div>
        </Mask>
    );
};

export default ChangeNickName;